<template>

    <div>

        <el-form :model="model" :rules="rules" ref="ruleForm" width="120px" class="demo-ruleForm">

        <div class="form-row">

            <el-form-item label="客户编码" prop="ClientCode">
                <el-input v-model="model.ClientCode"></el-input>
            </el-form-item>

            <el-form-item label="客户名称" prop="ClientName">
                <el-input v-model="model.ClientName"></el-input>
            </el-form-item>

            <el-form-item label="客户类型" prop="ClientType">
                <el-select v-model="model.ClientType" placeholder="请选择客户类型">
                    <el-option label="企业用户" value="企业用户"></el-option>
                    <el-option label="个人用户" value="个人用户"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="客户简称" prop="ClientNick">
                <el-input v-model="model.ClientNick"></el-input>
            </el-form-item>

        </div>

        <div class="form-row">

            <el-form-item label="客户英文名称" prop="ClientEn">
                <el-input v-model="model.ClientEn"></el-input>
            </el-form-item>

            <el-form-item label="客户订单号" prop="OrderNumber">
                <el-input v-model="model.OrderNumber"></el-input>
            </el-form-item>


            <el-form-item label="客户简介" prop="ClientDes">
                <el-input v-model="model.ClientDes"></el-input>
            </el-form-item>

            <el-form-item label="客户地址" prop="Address">
                <el-input v-model="model.Address"></el-input>
            </el-form-item>

        </div>

        <div class="form-row">

            <el-form-item label="客户官网地址" prop="Website">
                <el-input v-model="model.Website"></el-input>
            </el-form-item>

            <el-form-item label="客户邮箱" prop="Email">
                <el-input v-model="model.Email"></el-input>
            </el-form-item>

            <el-form-item label="客户电话" prop="Tel">
                <el-input v-model="model.Tel"></el-input>
            </el-form-item>

            <el-form-item label="社会信用代码" prop="CreditCode">
                <el-input v-model="model.CreditCode"></el-input>
            </el-form-item>

        </div>


        <div>

            <el-form-item label="备注" prop="Remark">
                <el-input v-model="model.Remark"></el-input>
            </el-form-item>

        </div>

        <div>

            <el-form-item label="联系人1" prop="Contact1">
                <el-input v-model="model.Contact1"></el-input>
            </el-form-item>

            <el-form-item label="联系人1-电话" prop="Contact1Tel">
                <el-input v-model="model.Contact1Tel"></el-input>
            </el-form-item>

            <el-form-item label="联系人1-邮箱" prop="Contact1Email">
                <el-input v-model="model.Contact1Email"></el-input>
            </el-form-item>

        </div>

        <div>


            <el-form-item label="联系人2" prop="Contact2">
                <el-input v-model="model.Contact2"></el-input>
            </el-form-item>

            <el-form-item label="联系人2-电话" prop="Contact2Te2">
                <el-input v-model="model.Contact2Te2"></el-input>
            </el-form-item>

            <el-form-item label="联系人2-邮箱" prop="Contact2Email">
                <el-input v-model="model.Contact2Email"></el-input>
            </el-form-item>


            <el-form-item label="是否启用" prop="EnableFlag">
                <el-radio-group v-model="model.EnableFlag">
                    <el-radio label="Y">是</el-radio>
                    <el-radio label="N">否</el-radio>
                </el-radio-group>
            </el-form-item>

        </div>

        <div>

            <el-form-item label="出库上限" prop="OutMax">
                <el-input-number v-model="model.OutMax"></el-input-number>
            </el-form-item>

            <el-form-item label="出库下限" prop="OutMin">
                <el-input-number v-model="model.OutMin"></el-input-number>
            </el-form-item>

        </div>


        <el-form-item class="page-box-footer">
            <el-button type="primary" @click="submitForm">{{ isUpdate?'立即保存':'立即创建' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>

        </el-form>

    </div>

</template>


<script>

export default {
    props:{
        model: {
            required: true,
            type: Object
        },
        isUpdate: {
            required: true,
            type: Boolean
        }
    },
    data(){
        return {
            UnitMeasureList:[],
            rules: {
                ClientCode: { required: true, message: '请输入客户编码', trigger: 'blur' },
                ClientName: { required: true, message: '请输客户名称', trigger: 'blur' },
                EnableFlag: {required: true, message: '请选择是否主启用', trigger: 'blur'},
                ClientType:{required: true, message: '请选择客户类型', trigger: 'blur'},
            }
        }
    },
    created(){
        this.GetClientAll();
    },
    methods:{
        submitForm(){
            this.$refs['ruleForm'].validate((valid)=>{
                if(valid){
                    if(this.isUpdate){
                        this.put();
                    }
                    else{
                        this.add();
                    }
                } else{
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },

        //新增
        add(){        
            
            this.$http.postForm('/api/Client',{model:this.model},{loading:this.$loading()})
            .then(res=>{
                this.$emit('callback');
            })
        },

        //修改
        put(){
            this.$http.putForm('/api/Client',{model:this.model},{loading:this.$loading()})
            .then((res)=>{
                this.$emit('callback');
            })
        },
        GetClientAll(){
            this.$http.get('/api/Client/GetAll')
            .then(res=>{
                this.UnitMeasureList=res.Data ;
            })
        }




    }



}





</script>



<style scoped>
.form-row {
  display: flex;
  justify-content: space-between; /* 在每个表单项之间分配空间 */
}
.form-row > el-form-item {
  flex: 1;
}
</style>